<template>
  <div class="recommend">
    <div class="total">
      <div class="top">
        <p>
          <strong>总资产(元) </strong
          ><i
            :class="
              passwordType === 'password' ? 'el-icon-close' : 'el-icon-view'
            "
            @click="changeType"
          ></i>
        </p>
        <p v-if="passwordType === 'password'"><strong>***</strong></p>
        <p v-else>
          <strong>{{ totalmoney }}</strong>
        </p>
      </div>
      <div class="bottom">
        <div class="b1">
          <p v-if="passwordType === 'password'">***</p>
          <p v-else>{{ huo }}</p>
          <h6>活期</h6>
        </div>
        <div class="b2">
          <p v-if="passwordType === 'password'">***</p>
          <p v-else>{{ cunk }}</p>
          <h6>定期</h6>
        </div>
        <div class="b3">
          <p v-if="passwordType === 'password'">***</p>
          <p v-else>--</p>
          <h6>湘米</h6>
        </div>
      </div>
    </div>
    <div class="rebg">
      <div class="recommend-item" @click="todeposit">
        <img src="../../assets/images/1.png" alt="" />
        <div style="color:black">
          <h5>存款</h5>
        </div>
      </div>
      <div class="recommend-item" @click="toaccount">
        <img src="../../assets/images/2.png" alt="" />
        <div style="color:black">
          <h5>账户</h5>
        </div>
      </div>
      <div class="recommend-item">
        <img src="../../assets/images/3.png" alt="" />
        <div style="color:black">
          <h5>资产</h5>
        </div>
      </div>
      <div class="recommend-item">
        <img src="../../assets/images/4.png" alt="" />
        <div style="color:black">
          <h5>明细</h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { allAccount } from "@/api/account";
import { queryOrders } from "@/api/orders";
import { theProduct } from "@/api/product";
export default {
  setup() {
    const state = reactive({
      count: 0,
      passwordType: "text",
      totalmoney: 0,
      huo: 0,
      cunk: 0,
      accountList: [],
      ordersList: [],
      tempList: [],
    });
    const changeType = () => {
      if (state.passwordType === "password") {
        state.passwordType = "text";
      } else {
        state.passwordType = "password";
      }
    };
    const router = useRouter();
    const toaccount = () => {
      router.push("/account");
    };
    const todeposit = () => {
      router.push("/deposit");
    };
    const initRec = async () => {
      let res = await allAccount(localStorage.getItem("userID"));
      console.log(res);
      for (let item of res.data) {
        state.accountList.push(item.id);
        state.huo += item.money;
      }
      console.log(state.accountList);
      for (let i of state.accountList) {
        res = await queryOrders(i);
        for (let it of res.data) {
          state.ordersList.push(it);
        }
      }

      for (let ite of state.ordersList) {
        if (ite.is_deal === true && ite.is_pay === true)
          state.tempList.push(ite.product);
      }
      for (let ii of state.tempList) {
        res = await theProduct(ii);
        for (let iit of res.data) {
          state.cunk += iit.money;
        }
      }
      state.totalmoney = state.huo + state.cunk;
    };
    initRec();
    return {
      ...toRefs(state),
      changeType,
      toaccount,
      todeposit,
    };
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  width: 100%;
  text-align: center;
  padding: 15px 0 30px;
  font-size: 12px;
  height: 300px;
  background-image: linear-gradient(#95d475, #ffffff);
}
.rebg {
  width: 80%;
  height: 30%;
  display: flex;
  text-align: center;
  margin: 0 auto;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
.total {
  width: 100%;
  height: 70%;
  font-size: 18px;
}
.top {
  color: white;
  margin: 0 auto;
  padding-top: 40px;
  width: 80%;
  height: 60%;
  text-align: left;
  line-height: 30px;
  border-bottom: 1px solid white;
}
.bottom {
  margin: 0 auto;
  width: 80%;
  height: 40%;
  display: flex;
  justify-content: space-around;
  color: white;
}
.bottom div {
  padding: 10px;
  width: 100px;
  height: 100%;
}

.recommend-item {
  flex: 1;
  img {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
    margin-top: 10px;
  }
}
</style>
